<template>
	<view class="container">
		<image @click="clickSearch" class="search-icon" src="../../../static/images/shaixuan.png"></image>
		<view class="game-tag-container" v-show="isShowSearch" @click="clickSerchContainer">
			<view class="game-tag-container__body" @click.stop="stopEvent">
				<text class="game-tag-container__body-title">退款状态</text>
				<view class="game-tag-container__tag">
					<view
						v-for="(item, index) in tagList"
						:key="index"
						@click.stop="clickTagItem(index)"
						:class="clickTagIndex == index ? 'game-tag-container__item selected-game-tag' : 'game-tag-container__item'"
					>
						{{ item.label }}
					</view>
				</view>
				<text class="game-tag-container__body-title">申请时间</text>
				<view style="display: flex;justify-content: space-between;align-items: center;margin-left: 20rpx;margin-right: 20rpx;">
					<picker mode="date" @click.stop="stopEvent" @change="bindStartDateChange" :value="startDate" class="picker" style="width: 250rpx;text-align: center;">
						<view class="uni-input">{{ startDate }}</view>
					</picker>
					<view style="background-color: #333333;width: 40rpx;height: 2rpx"></view>
					<picker mode="date" @click.stop="stopEvent" @change="bindEndDateChange" :value="endDate" class="picker" style="width: 250rpx;text-align: center;">
						<view class="uni-input">{{ endDate }}</view>
					</picker>
				</view>
				<view class="game-tag-container__bottom">
					<view class="game-tag-container__bottom-reset-btn" @click.stop="resetSearch">重置</view>
					<view class="game-tag-container__bottom-confirm-btn" @click.stop="confirmSearch">确定</view>
				</view>
			</view>
		</view>
		<view class="refund-info-container" v-if="refundList.length > 0">
			<view class="refund-info new-border" v-for="(item, index) in refundList" :key="index">
				<view class="refund-info-item">
					<text class="refund-info-item-title">退款编号：</text>
					<text class="refund-info-item-content">{{ item.orderNo }}</text>
				</view>
				<view class="refund-info-item">
					<text class="refund-info-item-title">申请时间：</text>
					<text class="refund-info-item-content">{{ item.createTime }}</text>
				</view>
				<view class="refund-info-item">
					<text class="refund-info-item-title">订单金额：</text>
					<text class="refund-info-item-content">{{ item.orderFee | formatMoneyRmbUnit }}</text>
				</view>
				<!-- 	<view class="refund-info-item">
					<text class="refund-info-item-title">申请金额：</text>
					<text class="refund-info-item-content">{{ item.Fee }}</text>
				</view> -->
				<view class="refund-info-item">
					<text class="refund-info-item-title">退款金额：</text>
					<text class="refund-info-item-content">{{ item.orderRefund | formatMoneyRmbUnit }}</text>
				</view>
				<view class="refund-info-item">
					<text class="refund-info-item-title">退款状态：</text>
					<text class="refund-info-item-content">{{ item.statusName }}</text>
				</view>
			</view>
		</view>
		<empty v-else ></empty>
	</view>
</template>

<script>
import { isLogin, toLogin } from '@/config/common.js';
import { getRefundStatusList } from '@/constant/home.js';
import { searchAppGuestRoomOrderRefundList } from '@/constant/customer.js';
export default {
	data() {
		return {
			query_filter: {
				customerId: uni.getStorageSync('customerId'),
				beginTime: '',
				endTime: '',
				status: '',
				pageNum: 0,
				pageSize: 10
			},
			startDate: '请选择开始时间',
			endDate: '请选择结束时间',
			isShowSearch: false,
			clickTagIndex: -1,
			refundList: [],
			tagList: [{
            label: '全部',
            value: 'all'
          },
          {
            label: '退款中',
            value: '-30'
          },
          {
            label: '退款成功',
            value: '-40'
          },
          {
            label: '退款失败',
            value: '-50'
          },
          {
            label: '拒绝退款',
            value: '-60'
          },],
			refundStatusList: []
		};
	},
	onLoad() {
		if (isLogin()) {
			this.getRefundStatus();
			this.getRefundList();
		} else {
			toLogin();
		}
	},
	onReachBottom() {
		this.query_filter.pageNum++;
		this.getRefundList();
	},
	onPullDownRefresh() {
	this.initData()
	},
	methods: {
		initData(){
			this.query_filter.pageNum = 1;
			this.refundList=[]
			this.getRefundList();
		},
		clickSerchContainer() {
			this.isShowSearch = false;
		},
		clickSearch() {
			this.isShowSearch = true;
		},
		clickTagItem(val) {
			this.clickTagIndex = val;
			this.query_filter.status = this.tagList[val].value;
		},
		bindStartDateChange(e) {
			this.startDate = e.target.value;
			this.query_filter.beginTime = this.startDate;
		},
		bindEndDateChange(e) {
			this.endDate = e.target.value;
			this.query_filter.endTime = this.endDate;
		},
		stopEvent() {
			return;
		},
		resetSearch() {
			this.clickTagIndex = -1;
			this.startDate = '请选择开始时间';
			this.endDate = '请选择结束时间';
			this.query_filter.beginTime = '';
			this.query_filter.endTime = '';
			this.query_filter.status = '';
		},
		confirmSearch() {
			this.isShowSearch = false;
			this.initData()
		},
		async getRefundList() {
			//订单列表
			let res = await searchAppGuestRoomOrderRefundList(this.query_filter);
			let data=res.data.list
			console.log(res.data)
			uni.stopPullDownRefresh();
			if (this.query_filter.pageNum > 0) {
				for (let i = 0; i < data.length; i++) {
					let obj = data[i];
					this.refundList.push(obj);
				}
			} else {
				this.refundList = data;
			}
		},
		async getRefundStatus() {
			let that = this;
			let result = await getRefundStatusList();
			this.refundStatusList = result;
			this.refundStatusList.forEach(function(item) {
				that.tagList.push(item.Description);
			});
		}
	}
};
</script>
<style>
@import url('../../../css/common.css');
</style>
<style scoped lang="scss">
.container {
	background-color: $main-page-color;
	height: 100vh;
	// overflow-y: auto;
	padding-bottom: 40rpx;
}

.refund-info-container {
	display: flex;
	flex-direction: column;
	padding-top: 70rpx;
	overflow-y: hidden;
	.refund-info {
		min-height: 120rpx;
		font-size: $main-text-size-32;
		padding: 20rpx 10rpx;
		&-item {
			margin: 20rpx;

			&-content {
				color: #999;
			}
		}
	}
}

.no-content {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
}

.search-icon {
	position: fixed;
	top: 20rpx;
	right: 20rpx;
	z-index: 1;
	width: 48rpx;
	height: 48rpx;
}

.game-tag-container {
	position: fixed;
	z-index: 999;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);

	&__body {
		background-color: #fff;
		width: 550rpx;
		height: 100vh;
		overflow-y: auto;
		position: absolute;
		right: 0;
		top: 0;
		font-size: 28rpx;
		animation: mymove 0.5s 1;

		&-title {
			margin: 20rpx;
			display: block;
		}
	}

	&__tag {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	&__item {
		font-size: 26rpx;
		padding: 10rpx 20rpx 10rpx 20rpx;
		border: 2rpx solid #dd524d;
		color: #dd524d;
		background-color: #fff;
		margin-left: 20rpx;
		margin-top: 20rpx;
		border-radius: 8rpx;
	}

	.selected-game-tag {
		background-color: #dd524d;
		color: #fff;
	}

	&__bottom {
		position: absolute;
		bottom: 20rpx;
		display: flex;
		z-index: 9999;
		font-size: 30rpx;
		width: 100%;
		justify-content: space-between;

		&-reset-btn {
			width: 150rpx;
			height: 70rpx;
			background-color: #dedede;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx;
			margin-left: 20rpx;
		}

		&-confirm-btn {
			width: 150rpx;
			height: 70rpx;
			background-color: $main-text-color-red;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}
	}
}

@keyframes mymove {
	from {
		right: -200px;
	}

	to {
		right: 0;
	}
}

.picker {
	border: 2rpx solid $main-line-color-gray-DE;
	padding: 5rpx;
	font-size: 28rpx;
}
</style>
